/* To hide the "Download Vimeo app for Android" toast message,
   which doesn't make sense to appear on Firefox Reality (but does make sense for Firefox for Android). */
.app_banner_container,
.app_banner {
  display: none !important;
}

/* To properly overlay the canvas video from `?canvas=1` on a video-detail page.
   Example: https://vimeo.com/241734384?canvas=1 */
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"],
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"] body,
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"] .player,
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"] .fallback {
  background-color: transparent !important;
}

.player.loading {
  opacity: 0;
}

/* Fix black screen issue.
   More info: https://github.com/MozillaReality/FirefoxReality/issues/1299 */
.vp-canvas-effect {
   display:none;
}

/* To properly overlay the canvas video from `?canvas=1` on a video-embed page.
   Example: https://player.vimeo.com/video/241734384?canvas=1 */
html[data-fxr-is-360="true"][data-fxr-video-page-layout="embed"] .vp-placeholder {
  background: transparent !important;
}

/* These styles are useful for visually debugging the elements. Can be toggled by adding `debug=1` to the current URL's query-string. */
html[data-fxr-debug="true"],
html[data-fxr-debug="true"] .outer_wrap {
  background-color: yellow;
}

html[data-fxr-debug="true"][data-fxr-is-360="false"] {
  background-color: red !important;
}

html[data-fxr-debug="true"][data-fxr-is-360="true"] {
  background-color: green !important;
}

html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] {
  border: 1px solid pink;
}

html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] body {
  border: 2px solid orange;
}

html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] .player {
  border: 2px solid purple;
}

html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] .fallback {
  border: 1px solid blue;
}
